$light: (
  color: (0: transparent,
    1:#000,
    2:#fff,
    3:#333,
    4:#1c1e2e,
    5:#3b86f6,
    6:#666,
    7:#ae9fc6,
    8:#ea643a,
    9:#999,
    10:#4e260c,
    11:#a78f79,
    12:#ac5dff,
    13:#f17970,
    14:#b3b3b3,
    15:#ff0404,
    16:#8c9ff7,
    17:#787773,
    18:#efefef,
    19:#fd502d,
    20:#773b00,
    21:#eb4837,
    22:#a76a40,
    23:#a46438,
    24:#efe5cd,
    25:#a2a2a8,
    26:#ecd188,
    27:#56bdfc,
    28:#ff0909,
    29:#c0c0c0,
  ),
  background: (0: transparent,
    1:#000,
    2:#fff,
    3:#f5f5f5,
    4:#eee,
    5:#3b86f6,
    6:linear-gradient(90deg, #56bdfc, #b99cf9),
    7:#875332,
    8:#f5ecff,
    9:#ffedeb,
    10:linear-gradient(90deg, #fe4f20, #fe8b2a),
    11:#deecfd,
    12:#f6459d,
    13:linear-gradient(90deg, #15151e, #39434d),
    14:#212121,
    15:linear-gradient(90deg, #fadc9e, #fdc45b),
    16: linear-gradient(-45deg, #f6dec5, #e6b587),
    17:#daa16d,
    18:#e94b39,
    19:#38424c,
    20:#383c45,
    21:#101010,
    22:#1d1d1d,
    23:#56bdfc,
    24:#e3f0ff,
    25:#404040,
    26:#31475c,
    27:linear-gradient(-45deg, #cb7b54 0%, #f04033 100%),
  )
);

$dark: (
  color:(transparent: transparent),
  background: (transparent: transparent)
);

$themes: (
  light: $light,
  dark: $dark,
);

$styleMaps: (
  color: color,
  background: bg,
  font-size: fs
);

@mixin set-theme($theme) {

  @each $key,
  $colors in map-get($themes, $theme) {

    @each $name,
    $color in $colors {
      #{if($theme == "dark", ".dark", "")} .#{map-get($styleMaps, $key)}-#{'' + $name} {
        #{$key}: $color !important;
      }
    }
  }
}

@each $theme,
$value in $themes {
  @include set-theme($theme);
}